<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-tabs is a g-selector styled to look like a tab menu.
 *
 * Example:
 *
 *     <g-tabs selected="0">
 *       <span>One</span>
 *       <span>Two</span>
 *       <span>Three</span>
 *       <span>Four</span>
 *     </g-tabs>
 *
 * @class g-tabs
 * @extends g-selector
 */
-->
<link rel="import" href="g-selector.html">
<polymer-element name="g-tabs" extends="g-selector">
  <template>
    <style>
      .tabs {
        display: block;
        height: 59px;
        border: 0;
        background-color: white;
        border-bottom: 1px solid #e8e8e8;
        white-space: nowrap;
      }
      
      /*@polyfill .tabs > * */
      ::-webkit-distributed(*) {
        display: inline-block;
        min-width: 60px;
        height: 59px;
        line-height: 59px;
        text-align: center;
        padding: 0 8px;
        cursor: default;
        color: #999;
        font-size: 14px;
      }
      
      /*@polyfill .tabs > *.selected */
      ::-webkit-distributed(*.selected) {
        color: #fff;
        background: #4888f0;
      }
    </style>
    <div class="tabs">
      <shadow></shadow>
    </div>
  </template>
  <script>
    Polymer('g-tabs');
  </script>
</polymer-element>
